import React, {useState} from "react";
import store from "../../../../store";
import {observer} from "mobx-react";
import '../../../../components/content/contentForm/index.scss'
import SelectAuthor from "../../../../components/content/selectAuthor";
import ContentForm from "../../../../components/content/contentForm";
import SelectLabel from "../../../../components/content/selectLabel";
import SetVideo from "../../../../components/content/setVideo";
import {useNavigate} from "react-router-dom";

const AddContent = () => {
    const navigate=useNavigate()
    // 选择标签
    const [labels, setLabels] = useState([])
    // 选择作者
    const [author, setAuthor] = useState('')
    // 选择作者弹框是否显示
    const [isAuthorModalOpen, setIsAuthorModalOpen] = useState(false);
    // 选择标签弹框是否显示
    const [isLabelModalOpen, setIsLabelModalOpen] = useState(false);
    // 编辑视频弹框是否显示
    const [isSetVideoModalOpen, setIsSetVideoModalOpen] = useState(false);
    //表单提交触发的函数
    const submit=(values,file)=>{
        console.log(file)
        console.log('提交',values)
        store.content.addContent(values,file)
        navigate(-1)
    }
    return (
        <>
            <ContentForm
                row={{app:'小黑早教',state:'上架'}}
                labels={labels}
                setLabels={setLabels}
                author={author}
                setIsAuthorModalOpen={setIsAuthorModalOpen}
                setAuthor={setAuthor}
                setIsLabelModalOpen={setIsLabelModalOpen}
                submit={submit}
                setIsSetVideoModalOpen={setIsSetVideoModalOpen}
            >
            </ContentForm>
            <SelectAuthor
                isAuthorModalOpen={isAuthorModalOpen}
                setIsAuthorModalOpen={setIsAuthorModalOpen}
                author={author}
                setAuthor={setAuthor}
            >
            </SelectAuthor>
            <SelectLabel
            isLabelModalOpen={isLabelModalOpen}
            setIsLabelModalOpen={setIsLabelModalOpen}
            labels={labels}
            setLabels={setLabels}
            ></SelectLabel>
            <SetVideo
                isSetVideoModalOpen={isSetVideoModalOpen}
                setIsSetVideoModalOpen={setIsSetVideoModalOpen}
            ></SetVideo>
        </>
    );
}
export default observer(AddContent)